<template>
	<view class="container">
		<view class="formBox">
			<uni-forms ref="form" :modelValue="form">
				<view class="box">
					<uni-forms-item label="姓名" name="user_name">
						<view class="dis-input">{{ form.user_name }}</view>
					</uni-forms-item>
					<uni-forms-item label="手机号" name="user_mobile">
						<view class="dis-input">{{ form.user_mobile }}</view>
					</uni-forms-item>
					<uni-forms-item label="岗位" name="role_name">
						<picker @change="bindPickerChange" :value="index" :range="role" range-key="role_name">
							<view class="picker-input">
								{{ form.role_name }}
								<uni-icons type="right" size="16" color="#bbb"></uni-icons>
							</view>
						</picker>
					</uni-forms-item>
				</view>
				<view class="btns">
					<button class="btn" type="warn" @click="deleteIt">删除员工</button>
					<button class="btn" type="primary" @click="submit">确定</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';

export default {
	data() {
		return {
			form: {},
			role: []
		};
	},
	onLoad(e) {
		this.form = JSON.parse(e.item);
	},
	onShow() {
		this.getList();
	},
	methods: {
		bindPickerChange(e) {
			this.form.role_name = this.role[e.detail.value].role_name;
			this.form.role_id = this.role[e.detail.value].id;
		},
		deleteIt() {
			const _this = this;
			uni.showModal({
				title: '提示',
				content: '确定删除该员工？',
				success: function (res) {
					if (res.confirm) {
						api.staffDelete({ user_id: _this.form.role_id }).then((data) => {
							if (data.data.is_success) {
								uni.showToast({
									title: '操作成功！'
								});
								setTimeout(() => {
									uni.hideToast();
									uni.navigateBack();
								}, 1000);
							}
						});
					}
				}
			});
		},
		submit() {
			const detail = {
				user_id: this.form.id,
				role_id: this.form.role_id
			};
			api.staffEdit(detail).then((res) => {
				if (res.data.is_success) {
					uni.showToast({
						title: '修改成功'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 500);
				}
			});
		},
		getList() {
			api.roleList().then((res) => {
				this.role = res.data;
			});
		}
	}
};
</script>